<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div_demo"></div>
<div style="height: 50px; display:none;" id="hide_demo"></div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.tmpl.js"></script>
<script id="demo" type="text/x-jquery-tmpl">
    <div>
    　　<span>${ID}</span>
    　　<span style="margin-left:10px;">{{= Name}}</span>
    　　<span style="margin-left:10px;">${Number(Num)+1}</span>
    　　<span style="margin-left:10px;">${Status}</span>
    </div>
</script>
<script type="text/javascript">
    var users = [
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'},
        { ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 },
        { ID: 'aCloud', Name: 'Mary Cheung', Num: '2'}
    ];
   $(function () {
       $("#demo").tmpl(users).appendTo('#div_demo');
   })



    var time=3;
    var interval;
    $(window).scroll(function(){

        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if(scrollTop + windowHeight == scrollHeight){
            if(time<3){
                setTimeout(function () {
                    $("#hide_demo").css("display","block");
                },3000)
                return
            }else {
                setTime();
                $("#hide_demo").css("display","none");
                $("#demo").tmpl(users).appendTo('#div_demo');
            }

        }
    });
    function  setTime() {
        time=0;
        interval = setInterval(func, 1000);
    }
    function  func() {
        time+=1;
        console.log(time);
        if(time==3){
            clearTimeout(interval);
        }
    }


</script>
</html>